<template>
  <div class="tabbar">
    <dl
      v-for="(item,index) in list"
      :key="index"
      @click="changeTabbar(index)"
      >
      <dt>
        <img v-if="value !== item.value" :src="'/static/tabbar/'+item.value+'.png'" />
        <img v-else :src="'/static/tabbar/'+item.value+'_selected.png'">
      </dt>
      <dd>{{item.text}}</dd>
    </dl>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        list: [
          {
            value: 'home',
            text: '首页',
            page: '/pages/home/main'
          },
          {
            value: 'attention',
            text: '关注',
            page: '/pages/attention/main'
          },
          {
            value: 'radar',
            text: '摊位雷达',
            page: '/pages/radar/main'
          },
          {
            value: 'circle',
            text: '圈子',
            page: '/pages/circle/main'
          },
          {
            value: 'member',
            text: '我的',
            page: '/pages/member/main'
          }
        ]
      }
    },
    props: {
      value: {
        type: String,
        default: 'home'
      }
    },
    methods: {
      // 切换链接
      changeTabbar (index) {
        if (this.list[index].value === 'radar') {
          mpvue.navigateTo({url: this.list[index].page})
        } else {
          mpvue.switchTab({url: this.list[index].page})
        }
      }
    }
  }
</script>

<style scoped lang="less" src="./tabbar.less"></style>
